<template>
  <div class="dispatchPlanOne-wrapper">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待收费" name="first">
        <div class="dispatchPlanOne-search">
          <div class="search-header">
            <el-form class="search-form search-less">
              <el-form-item class="search-keyword search-form-bottom" label="关键词:">
                <el-input  v-model="select2"></el-input>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="resrt">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="search-content">
            <el-table
              :data="tableData"
              stripe
              border
              style="width: 100%">
              <el-table-column type="index" label="序号" width="70"></el-table-column>
              <el-table-column label="类型"  prop="transProps">
                  <template slot-scope="scope">
                    {{$dictUtils.getDictLabel("transProps", scope.row.transport.transProps, "")}}
                  </template>
              </el-table-column>
              <el-table-column label="车牌号" prop="truckNumber" ></el-table-column>
              <el-table-column label="司机" >
                <template slot-scope="scope">
                  {{scope.row.transport.truckDriver.name}}          {{scope.row.transport.truckDriver.phone}}
                </template>
              </el-table-column>
              <el-table-column label="货物" prop="product.name"></el-table-column>
              <el-table-column label="仓库" prop="transport.transportPlan.sendAddress"></el-table-column>
              <el-table-column label="车辆类型" prop="transport.axle.axle"></el-table-column>
              <el-table-column label="自卸" >
                <template slot-scope="scope">
                  <!-- `checked` 为 true 或 false -->
                  <el-checkbox v-if="scope.row.truckType === 1" v-model="checked" ></el-checkbox>
                  <el-checkbox v-if="scope.row.truckType === 0" v-model="checked1" ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="应收金额" prop="receivableMoney"></el-table-column>
              <el-table-column label="业务信息" prop="transportId"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-link type="primary" v-if="hasPermission('truck:loading:add')" @click="edit(scope.row)">收取车费</el-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="content-bottom">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :current-page="page.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已收费" name="second">
        <div class="create-dispatch">
          <div class="create-dispatch-content">
            <div class="content-title">
              <el-form :inline="true">
                <el-form-item label="到期日:">
                  <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format='yyyy-MM-dd HH:mm:ss'
                    :default-time="['12:00:00']">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="关键字:">
                    <el-input placeholder="输入车牌号/司机姓名/电话"  v-model="select1" ></el-input>
                    <el-button type="primary"  @click="onSubmit1">查询</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="content-table">
              <el-table
                :data="tableData1"
                stripe
                border
                style="width: 100%">
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column label="类型"  prop="transProps">
                  <template slot-scope="scope">
                    {{$dictUtils.getDictLabel("transProps", scope.row.transport.transProps, "")}}
                  </template>
                </el-table-column>
                <el-table-column label="车牌号" prop="truckNumber" ></el-table-column>
                <el-table-column label="司机" >
                  <template slot-scope="scope">
                    {{scope.row.transport.truckDriver.name}}          {{scope.row.transport.truckDriver.phone}}
                  </template>
                </el-table-column>
                <el-table-column label="货物" prop="product.name"></el-table-column>
                <el-table-column label="仓库" prop="transport.transportPlan.sendAddress"></el-table-column>
                <el-table-column label="车辆类型" prop="transport.axle.axle"></el-table-column>
                <el-table-column label="自卸" >
                  <template slot-scope="scope">
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-if="scope.row.truckType === 1" v-model="checked" ></el-checkbox>
                    <el-checkbox v-if="scope.row.truckType === 0" v-model="checked1"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column label="应收金额" prop="receivableMoney"></el-table-column>
                <el-table-column label="实收金额" prop="actualMoney"></el-table-column>
                <el-table-column label="支付时间" prop="paySuccessTime"></el-table-column>
                <el-table-column label="支付方式" prop="payMode">
                  <template slot-scope="scope">
                    {{$dictUtils.getDictLabel("payType", scope.row.payMode, "")}}
                  </template>
                </el-table-column>
                <el-table-column label="第三方交易号" prop="thirdPlatDataId"></el-table-column>
                <el-table-column label="业务信息" prop="transportId"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-link type="primary" v-if="hasPermission('truck:loading:modifyState')"  @click="cancellation(scope.row)">作废</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="content-bottom">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :current-page="page.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <accepting-loading-fee  ref="acloadingFee" @refreshDataList="getList"></accepting-loading-fee>
  </div>
</template>

<script>

    import {getloadingFeeList, cancellation} from '@/api/truck/loadingFee/loadingFee.js'
    import acceptingLoadingFee from './acceptingLoadingFee'
    export default {
      data () {
        return {
          value1: '',
          checked: true,
          checked1: false,
          activeName: 'first',
          select1: '',
          select2: '',
          statusCurrentLess: 0,
          statusCurrentMore: 0,
          carCurrentStatus: 0,
          dataCurrentStatus: 0,
          tableData: [],
          tableData1: [],
          input: '',
          currentPage1: 5,
          page: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          creatTime: '',
          endTime: '',
          queryForm: {
            pageSize: 10,
            pageNo: 1,
            props: 1,
            orderBy: '',
            orderByAORC: '',
            keyword: '',
            processType: ''
          }
        }
      },
      components: {
        acceptingLoadingFee
      },
      activated () {
        this.getList()
        this.getList1()
      },
      methods: {
        handleClick (tab, event) {
          console.log(tab)
          if (tab.index === '1') {
            this.getNotFinishedList()
            this.getList1()
          } else {
            this.getList()
          }
        },
        // 获取列表带分页
        getList (params, props, orderName, orderByAORC, keyword) {
          this.loading = true
          getloadingFeeList({
            pageSize: this.page.pageSize,
            pageNo: this.page.pageNo,
            state: 1,
            props: props,
            orderBy: orderName,
            orderByAORC: orderByAORC,
            truckNumber: this.select2
          }).then(({data}) => {
            if (data.code === 200) {
                this.tableData = data.page.list
                this.page.total = data.page.count
                console.log(this.tableData)
                this.loading = false
            }
          })
        },
        // 获取列表带分页
        getList1 (params, props, orderName, orderByAORC, keyword) {
          if (this.value1 !== null) {
            this.creatTime = this.value1[0]
            this.endTime = this.value1[1]
          } else {
            this.creatTime = ''
            this.endTime = ''
          }
          this.loading = true
          getloadingFeeList({
            pageSize: this.page.pageSize,
            pageNo: this.page.pageNo,
            state: 2,
            props: props,
            orderBy: orderName,
            orderByAORC: orderByAORC,
            keyword: keyword,
            creatTime: this.creatTime,
            endTime: this.endTime,
            truckNumber: this.select1
          }).then(({data}) => {
            if (data.code === 200) {
              this.tableData1 = data.page.list
              this.page.total = data.page.count
              console.log(this.tableData)
              this.loading = false
            }
          })
        },
        // 禁用系统
        cancellation (row) {
          this.$confirm('确定要作废此条收费明细吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
              cancellation({id: row.id, state: -1}).then(res => {
                console.log(res.data)
                if (res.data.code === '200') {
                  this.$message({
                    type: 'success',
                    message: '作废此条收费明细成功!'
                  })
                  this.getList()
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '取消作废此条收费明细'
              })
              this.getList1()
            })
        },
        getNotFinishedList () {
          this.loading = true
          this.queryForm.pageSize = this.page.pageSize
          this.queryForm.pageNo = this.page.pageNo
        },
        edit (row) {
          this.$refs.acloadingFee.init(row)
        },
        onSubmit () {
          this.getNotFinishedList()
          this.getList()
        },
        resrt () {
          this.select2 = ''
        },
        onSubmit1 () {
          this.getNotFinishedList()
          this.getList1()
        },
        handleStatusListLess (index) {
          this.statusCurrentLess = index
        },
        handleStatusMoreList (index) {
          this.statusCurrentMore = index
        },
        handleCarStatusList (index) {
          this.carCurrentStatus = index
        },
        handleDateStatusList (index) {
          this.dataCurrentStatus = index
        },
        handleChange (val) {
          console.log(val)
        },
        handleSizeChange (val) {
          this.page.pageSize=val
        },
        handleCurrentChange (val) {
          console.log(`当前页: ${val}`)
        }
      }
    }
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
  body .el-table th.gutter {
    display: table-cell !important
  }
  .dispatchPlanOne-wrapper{
    margin:-20px;

    ::v-deep.el-tabs{
      .el-tabs__header{
        margin-bottom: 0;
        .el-tabs__item{
          width: 170px;
          height: 50px;
          line-height: 48px;
          border: 1px solid transparent;
          /*border-radius: 6px 0px 0px 0px;*/
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-align: center;
          padding: 0;
        }
        .el-tabs__item.is-active{
          background: $--color-primary-liyu;
          border-color: #EEEEEE;
          color: #FFFFFF;
        }
        .el-tabs__active-bar{
          display: none;
        }
        .el-tabs__nav-wrap::after{
          height: 1px;
          background: #EEEEEE;
        }
      }
      .el-tabs__content{
        .el-tab-pane:first-child{
          padding: 15px 20px;
          .dispatchPlanOne-search{
            .search-header{
              .search-less>.el-form-item:first-child{
                margin-bottom: 13px;
              }
              .search-less{
                .search-form-bottom{
                  margin-bottom: 20px;
                }
              }
              .search-more>.el-form-item{
                margin-bottom: 18px;
              }
              .search-more{
                .search-form-bottom{
                  margin-bottom: 12px;
                }
              }
              .el-form-item__label{
                line-height: 36px;
                text-align: right;
              }
              .el-form-item__content{
                line-height: inherit;
              }
              .el-button--text.is-plain{
                padding: 5px 9px;
                border-radius: 4px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                margin-top: 5px;
              }
              .el-button--text.statusActive,.el-button--text.is-plain:hover{
                color: #1890FF;
                border: 1px solid #1890FF;
              }
              .el-input {
                width: inherit;
                height: 36px;

                input {
                  width: 460px;
                  height: 36px;
                  border: 1px solid #AAAAAA;
                  border-radius: 4px;
                  color: #333333;
                }

                input:hover, input:focus {
                  border-color: #1890ff;
                }

                .el-input__inner::-webkit-input-placeholder {
                  color: #999999;
                }
              }
              .search-more{
                .custom-date{
                  margin-left: 31px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                }
                .search-form-bottom{
                  text-align: center;
                  .el-button--primary{
                    margin-left: 0;
                  }
                }

                .el-form-item .el-date-editor{
                  width: 280px;
                  height: 36px;
                  border: 1px solid #AAAAAA;
                  margin-left: 12px;

                  .el-range-separator{
                    width: 10%;
                    line-height: 28px;
                  }
                  .el-range__icon{
                    line-height: 28px;
                  }

                }
                .more-item-label{
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  width: 90px;
                }
                .el-select{
                  .el-input__inner{
                    width: 460px;
                    height: 36px;
                    border: 1px solid #AAAAAA;
                    border-radius: 4px;
                  }
                }
                .parallel{
                  display: flex;
                  .el-form-item{
                    display: flex;
                    .el-form-item__content{
                      margin-left: 0 !important;
                    }
                  }
                  .el-form-item:first-child{
                    margin-right: 113px;
                    margin-bottom: 20px;
                  }
                }
              }
              .search-keyword{
                display: flex;
              }
              .search-form-bottom{
                .el-button {
                  width: 60px;
                  height: 36px;
                  font-size: 14px;
                  border-radius: 4px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  padding: 0;
                  line-height: 36px;
                }

                .el-button--primary {
                  background: #1890FF;
                  color: #FFFFFF;
                  margin-left: 50px;
                  margin-right: 5px;
                }

                .el-button--primary:active {
                  background: #167AD9;
                }

                .el-button--default {
                  background: #fff;
                  border: 1px solid #AAAAAA;
                  color: #666666;
                }

                .el-button--default:active {
                  color: #1890ff;
                  border-color: #1890ff;
                }
              }
              .more{
                display: inline-block;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                margin-left: 47px;
              }
            }
            .search-content{
              .content-header{
                .el-button--default.is-plain{
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  padding: 0;
                  width: 60px;
                  height: 36px;
                  border: 1px solid #AAAAAA;
                  border-radius: 4px;
                }
                .el-button--default.is-plain:nth-child(4){
                  width: 99px;
                }
              }

            }

          }

        }

      }

    }
    .search-content .content-center{
      p{
        margin: 0;
      }
      ::v-deep.el-table{
        .el-table-column--selection{
          .cell{
            text-align: center;
            border-left: 1px solid #dddddd;
            padding-bottom: 0;
            height: 150px;
            border-left: 1px solid #dddddd;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            label{
              display: inline-block;
              width: 100%;
              background: #EEEEEE;
              height: 40px;
              line-height: 40px;

              .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
                background: #FFFFFF;
              }
              .el-checkbox__inner::after{
                border-color: #1890FF;
              }
              .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
                background-color: #1890FF;
              }
            }
          }
        }
        .el-table__header-wrapper{
          border-bottom: 1px solid #DDDDDD;
          box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
          border-radius: 6px;
          .el-table__header {
            th {
              vertical-align: top;
              border-bottom: none;
              background: #FFFFFF !important;
              padding-bottom: 0;
            }
            th:nth-last-child(2) .cell{
              border-right: 1px solid #DDDDDD;
            }
          }
        }
        .el-table__row{
          border-bottom: 1px solid #DDDDDD;
          box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
          border-radius: 6px;

        }
        td{
          vertical-align: top;
          border-bottom: 1px solid #DDDDDD;
          padding-bottom: 0;

          .cell{
            .cell-title{
              color: #333333;
              span{
                color: #999999;
              }
            }
            .cell-left{
              color: #999999;
            }
          }
        }
        td:last-child .cell{
          border-right: 1px solid #DDDDDD;
        }
        .cell{
          padding: 0;
          border-top: 1px solid #DDDDDD;
          height: 150px;


          .cell-title{
            background: #EEEEEE;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
          }
          ul{
            list-style: none;
            padding-left: 0;
            margin: 0;
          }
          .cell-row{
            display: flex;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            padding-top: 14px;

            li{
              margin-top: 5px;

            }
            li:first-child{
              margin-top: 0;

            }
          }
          .cell-status{
            padding-top: 14px;
          }
          .dispatch-status{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            .dispatch-status-note{
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
          .dispatch-status.draft{
            color: #999999;
            .dispatch-status-note{
              background: #999999;
            }
          }
          .dispatch-status.examine,.dispatch-status.on-going{
            color: #1890FF;
            .dispatch-status-note{
              background: #1890FF;
            }
          }
          .dispatch-status.waiting-car{
            color: #F59A23;
            .dispatch-status-note{
              background: #F59A23;
            }

          }
          .dispatch-status.suspend,.dispatch-status.discontinue{
            color: #FF3E3E;
            .dispatch-status-note{
              background: #FF3E3E;
            }
          }
          .dispatch-status.completed{
            color: #00A854;
            .dispatch-status-note{
              background: #00A854;
            }
          }
        }
        .el-table__body tr:hover>td{
          background-color: #ffffff;
        }
        .el-link.is-underline:hover:after{
          border-bottom: none;
        }
        .el-link--inner{
          text-decoration: underline;
        }
      }
    }

    .create-dispatch{
      .create-dispatch-header{
        margin-top:40px;
        padding-bottom:10px;
        background:#f1f2f5;

        ::v-deep.el-steps--horizontal{
          padding: 0 3%;
          height: 120px;
          background: #ffffff;
          border-radius: 4px;

          .el-step.is-horizontal:first-child{
            flex-basis:35% !important;
          }
          .el-step.is-horizontal:nth-child(2){
            flex-basis:38% !important;
          }
          .el-step__head{
            .el-step__line{
              /*width: 300px;*/
              height: 2px;
              top: 20px;
              right: 30px;
              background: #DDDDDD;
            }
            .el-step__icon.is-text{
              width: 40px;
              height: 40px;
              border: none;

              .el-step__icon-inner{
                font-size: 22px;
                font-family: Arial;
                font-weight: 400;
              }
            }
          }
          .el-step__head.is-finish{
            .el-step__line{
              left: 213px;
            }
            .el-step__icon.is-text{
              background: #1890FF;
              .el-step__icon-inner{
                color: #ffffff;
              }
            }
          }
          .el-step__head.is-process{
            .el-step__line{
              left: 257px;
            }
          }
          .el-step__head.is-process,.el-step__head.is-wait{
            .el-step__icon.is-text{
              background: #DDDDDD;
              .el-step__icon-inner{
                color: #ffffff;
              }
            }
          }
          .el-step__main{
            position: absolute;
            top: 0;
            left: 70px;
            .el-step__title{
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 40px;
            }

            .el-step__title.is-finish{
              font-weight: bold;
              color: #333333;
            }
            .el-step__title.is-finish{
              color: #333333;
            }
            .el-step__title.is-process,.el-step__description.is-process,.el-step__title.is-wait,.el-step__description.is-wait{
              color: #999999;
            }
            .el-step__description{
              width: 282px;
              height: 45px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              margin-top: 6px;
              line-height: 25px;
            }
            .el-step__description.is-finish{
              color: #666666;
            }
          }
        }

      }
      .create-dispatch-content{
        padding: 20px;
        .content-title{
          ::v-deep.el-form{
            .el-form-item{
              margin: 0;
            }
            .el-form-item:first-child{
              margin-right: 50px;
            }
            .el-form-item__label,.el-form-item__content{
              line-height: 36px;
            }
            .el-input {
              width: inherit;
              height: 36px;

              input {
                width: 250px;
                height: 36px;
                border: 1px solid #AAAAAA;
                border-radius: 4px;
                color: #333333;
              }

              input:hover, input:focus {
                border-color: #1890ff;
              }

              .el-input__inner::-webkit-input-placeholder {
                color: #999999;
              }
            }
            .el-button {
              width: 60px;
              height: 36px;
              font-size: 14px;
              border-radius: 4px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              padding: 0;
              line-height: 36px;
            }

            .el-button--primary {
              background: #1890FF;
              color: #FFFFFF;
              margin-left: 50px;
            }

            .el-button--primary:active {
              background: #167AD9;
            }
          }
        }
        .content-table{
          ::v-deep.el-table {
            margin-top: 20px;
            .el-table__header-wrapper{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
            }
            th{
              height: 46px;
              background: #EEEEEE;
              padding: 0;
              /*border-color: #dddddd;*/
            }

            .el-table__row{
              td{
                padding: 14px 0;
                /*border-color: #dddddd;*/
              }
              /*td:not(:nth-child(4)) .cell{*/
              /*  text-align: center;*/
              /*}*/
              td:last-child .cell{
                span{
                  margin-right: 15px;
                }
              }
              .cell{
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                /*padding: 6px 5px;*/
                box-sizing: content-box;
                /*height: 46px;*/
              }
              .el-link,.el-dropdown-link,.el-icon-arrow-down{
                font-size: 16px;
              }
              .el-dropdown-link {
                cursor: pointer;
                color: #1890FF;
              }
              .el-link--inner{
                margin-right: 10px;
              }
              .el-link:last-child .el-link--inner{
                margin-right: 0;
              }
              .el-link.is-underline:hover:after{
                border-bottom: none;
              }
            }
          }
        }
        .content-bottom{
          ::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active{
            background-color: #1890FF !important;
          }
        }
      }
    }
  }

</style>
